<template>
  <div ref="appContainer" class="app-container">
    <!--  :row-class-name="tableRowClassName"  :cell-style="changeCellStyle"-->
    <el-table
    :data="tableData"
    :row-class-name="tableRowClassName" 
    border 
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>


    <div id="main"></div>
    <div id="main2"></div>
    <div id="main3"></div>
    <div id="main6"></div>
  </div>
</template>
 
 
<script> 
import login from './login'
import * as echarts from 'echarts';
import {myEcharts,curveEcharts} from './utils'
export default {
  name: "TreeTest",
  components:{
    login
  },
  data() {
    return { 
      arrn:[],
      data3:{},
      echartdata: [10, 52, 200, 334, 390, 330, -220],
      xAxisData:["2021"],
      colorData: ['#C6D0D3', '#92CDBB', '#EDD977', '#E89F6A'],  
      xAxisData2:["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
      colorData2: ['#C6D0D3', '#92CDBB', '#EDD977', '#E89F6A'],

      echartdata2: [
        {
          // name:'第一个',
          arr:[10, 52, 200, 334, 390, 330, -220],
          arr2:[11, 22, 20, 33, 39, 33, -22]
        }
      ],
      data2:[
          {
            name:'第1个',
            arr:[10,11,15,31,11,16],
            arr2:[13,11,32,23,1,1],
          },
          {
            name:'第2个',
            arr:[16,11,14,35,18,5],
            arr2:[11,2,3,5,6,11],
          },
          {
            name:'第3个',
            arr:[-10,11,16,36,17,8],
            arr2:[12,11,23,33,12,3],
          }
        ],
      percentage:true,  

      tableData: [{
          date: '2016-05-03',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄', 
        }, {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄', 
          falg:true,
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王五',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王五',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王五',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        
    }
  },
  mounted(){ 
    // myEcharts('main',this.xAxisData2,this.echartdata2,this.colorData,this.colorData2,this.percentage,'30')  
    // myEcharts('main2',this.xAxisData2,this.data2,this.colorData,this.colorData2,this.percentage,'20')  
    // curveEcharts('main3',this.data2,this.xAxisData2,this.colorData)
    this.newdata(this.tableData)
  },
  methods: {   
    // 柱状图 
    lineChart(){ 

    },
    newdata(arr){
      let newarr = []
      arr.forEach((item)=>{ 
        newarr.push(item) 
        let lengtharr = newarr.length
        
      })
      console.log(newarr);
    },

    tableRowClassName: function({ row, rowIndex }) {
      // console.log(row, 'row');
      // console.log(row,rowIndex);
      if (row.falg) {
        return 'warm-row';
      }
    },  


  }   


}
</script>
<style lang="less">
 
.warm-row{
  // background-color: #62a0f6 !important; 
  td.el-table__cell{
    border-bottom: 1px solid red !important;
  }
}

  #main{
    width: 800px;
    height: 600px;
  }
  #main2{
    width: 800px;
    height: 600px;
  }
  #main3{
    width: 800px;
    height: 600px;
  }
  #main6{
    width: 800px;
    height: 600px;
  }
</style>